@charset "utf-8";
.box1 {
    background-color: #F1E9CF;
    width: 500px;
    height: 500px;
    border-width: 1px;
    border-style: solid;
}
.box1 div {
    width: 300px;
    height: 100px;
}

.box1 .item1 {
    background-color: #E03235;
}
.box1 .item2 {
    background-color: #43DD68;
}
.box1 .item3 {
    background-color: #4F81CF;
}
.box2 {
    background-color: #EFE5BE;
    width: 500px;
    height: 500px;
    border-width: 1px;
    border-style: solid;
}

.box2 .item1 {
    width: 300px;
    height: 100px;
    background-color: #DC2225;
}
.box2 .item2 {
    background-color: #4EDF6C;
    width: 350px;
    height: 150px;
}
.box2 .item3 {
    background-color: #437AE9;
    width: 400px;
    height: 200px;
}
.box3 {
    background-color: #E9E8C0;
    border-width: 1px;
    border-style: solid;
    width: 500px;
    height: 500px;
}
.box3 div {
    width: 300px;
    height: 100px;
}

.box3 .item1 {
    background-color: #E1282B;
    margin-bottom: 10px;
}
.box3 .item2 {
    background-color: #6DDFA4;
    margin-bottom: 10px;
}
.box3 .item3 {
    background-color: #3353BB;
}
.box4 {
    background-color: #EFF3CD;
    width: 500px;
    height: 500px;
    display: flex;
}
.box4 .item1 {
    width: 33.333%;
    height: 100px;
    background-color: #DC3336;
}
.box4 .item2 {
    background-color: #5EDF7D;
    width: 33.333%;
    height: 100px;
}
.box4 .item3 {
    width: 33.333%;
    height: 100px;
    background-color: #306FC5;
}
